<template>
  <div>
    <div class="map" v-show="isShow">
      <h1>{{mapNumber}}</h1>
      <input :placeholder="placeholderText" v-model="inputValue" />
      <div class="el-icon-arrow-up"></div>
    </div>
    <button @click="$emit('showbtn')">{{buttonShow}}</button>
    <div>{{inputValue}}</div>
    <!-- <div>{{citys}}</div> -->
    <ul v-for="(item,index) in citys" :key="index">
      <li @click="clickInput(item)">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "mapComponents",
  props: {
    inputText: String,
    placeholderText: String,
    mapNumber: Number,
    buttonShow: String,
    isShow: Boolean,
  },
  data() {
    return {
      inputValue: "",
      citys: [],
    };
  },
  watch: {
    inputValue() {
      this.modelInput();
    },
  },
  created() {
    this.modelInput();
  },
  methods: {
    clickInput(item) {
      // console.log(item);
      return (this.inputValue = item.name);
    },
    modelInput() {
      var self = this;
      AMap.plugin("AMap.Autocomplete", function () {
        // 实例化Autocomplete
        var autoOptions = {
          //city 限定城市，默认全国
          city: self.city,
        };
        var autoComplete = new AMap.Autocomplete(autoOptions);
        autoComplete.search(self.inputValue, function (status, result) {
          // 搜索成功时，result即是对应的匹配数据
          // console.log(result);
          self.citys = result.tips;
          // console.log(self.citys);
          self.$store.commit("address", result.tips);
        });
      });
    },
  },
};
</script>

<style lang="less" scoped>
input {
  padding-left: 3px;
}
.el-icon-arrow-up {
  position: relative;
  top: 0px;
  left: -16px;
  font-size: 12px;
}
</style>